import React, { Component } from 'react'
import './index.css'
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.css'
export default class ClassBanner extends Component {
    
    render() {
        const { listBanner }  =this.props
        return (
            <div className="class-banner-box">
                
                    <div className="swiper-container">
                            <div className="swiper-wrapper">
                                {
                                    listBanner.map((item,index) =>{
                                        return (
                                            <div className="swiper-slide" key={index}>
                                                <div >热书指数 <span style={{ fontSize:'.186667rem',fontWeight:600 ,color:'#e76940' }}>No1</span> </div>
                                                <div>{item.num} <span>人</span></div>
                                                <div>正在阅读《{item.book_name}》</div>
                                            </div>
                                        )
                                    })
                                }
                             
                            </div>
                    </div>
                
            </div>
        )
    }
    componentDidMount() {
        this.initSwiper();

      }
      
    initSwiper() {
        this.mySwiper = new Swiper('.swiper-container', {
          observer: true,            
          observeSlideChildren: true,  
          loop: true,  
          speed: 1000,    
          autoplay:{
            delay: 900,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            
          }
       
        });
        
      }
      
     componentWillUnmount(){
       
     }

}
